02_css선택자(selector)와 속성(property)
css서식을 적용하기 위한 선택자와 속성에 대해 이해할 수 있다.
1.선택자(selector)
선택자는 서식을 적용하기 위한 방법으로서 '클래스 선택자' , ' 아이디 선택자', '태그 선택자' 등 다양한 종류가 있다. w3shcools.com 참조
- 클래스(.class)선택자 : 사용자가 지정한 범위에서 서식을 적용하기 위한 선택자로서 언제든 다시 사용할 수 있는 선택자이며, class명앞에'.' 기호를 사용하는 것이 일반적이다.
- 아이디(#id)선택자 : 클래스 선택자와 마찬가지로 사용자가 지정한 범위에 서식을 적용하기 위한 선택자로서 클래스 선택자와 다른 점은 재사용 할 수 없다는 것이다. 만약 재사용시 웹표준검사에서 오류가 난다.
- 태그(tag)선택자 : html문서안에 tag명을 작성하여 자동으로 작성한 태그의 서식이 모두 적용되는 선택자이다.
2. 속성(property)
- 글자관련 : font-family(글자모양), font-size(글자크기), color(글자색상), text-decoration(글자밑줄, 윗줄, 줄없음), text-transform(영문자 대, 소문자 전환), font-style(글자 기울게, 보통)
- 문단관련 : text-align(정렬), text-indent(들여쓰기), line-height(줄간격),
- 크기관련 : width(가로너비), height(세로높이)
- 여백관련 : margin(바깥여백), padding(안쪽여백)
- 테두리 관련 : border(테두리)
- 배경 : background-color(배경색), background-image(배경이미지), background-size(배경이미지 크기), background-position(배경이미지의 위치)....
- 위치관련 : position, float, transform:translate
- 레이아웃 : flex, grid, display
- 애니메이션 : animation, transition
1. 글자관련 속성
글자모양, 글자크기, 글자색상
2. 문단관련 속성
문단정렬, 줄간격